<template>
  <div id="background">
    <el-container>
      <div id="renZhenTitleBack"></div>
      <el-header id="renZhenHeadPosition">
        <el-row type="flex" style="margin-top:10%">
          <el-col :xs="3" :sm="3" :md="3" :offset="2">
            <img v-bind:src="backIcon" style="height:28px" @click="back" />
          </el-col>
        </el-row>
        <el-row type="flex" justify="center">
          <el-col class="imgCol">
            <el-avatar :size="70" :src="info.head"></el-avatar>
          </el-col>
        </el-row>
        <el-row type="flex" justify="center">
          <el-col class="imgCol">
            <span class="renZhenNamecSS">{{info.nickname}}</span>
          </el-col>
        </el-row>
      </el-header>
      <el-main id="renZhenMainPosition">
        <div v-if="!renZhen">
          <el-row type="flex">
            <el-col class="imgCol">
              <img v-bind:src="alertIcon" style="height:30px" />
            </el-col>
          </el-row>
          <el-row type="flex">
            <el-col class="imgCol">
              <span style="color:#707070;">未认证</span>
            </el-col>
          </el-row>
          <el-row type="flex" style="margin-top:10%;">
            <el-col class="imgCol">
              <button class="btnRenZhen" @click="goToRenZhen">去认证</button>
            </el-col>
          </el-row>
        </div>
        <div v-else>
          <el-row>
            <el-col class="imgCol">
              <i class="el-icon-circle-check" style="font-size:30px;color:#53cdf5"></i>
            </el-col>
          </el-row>
          <el-row type="flex">
            <el-col class="imgCol">
              <span style="color:#707070;">已认证</span>
            </el-col>
          </el-row>
          <!-- <el-row type="flex" style="margin-top:10%;">
                        <el-col class="imgCol">
                            <button class="btnNotRenZhen">去认证</button>
                        </el-col>
          </el-row>-->
        </div>
      </el-main>
    </el-container>
  </div>
</template>
<script>
import backIcon from "../../assets/img/mine/geRenZhongXin/back.png";
import userPhoto from "../../assets/img/mine/geRenZhuYe/test.jpg";
import alertIcon from "../../assets/img/mine/renZhen/alert.png";
export default {
  data() {
    return {
      renZhen: "",
      backIcon: backIcon,
      userPhoto: userPhoto,
      alertIcon: alertIcon,
      //个人信息，这里主要用到用户名和头像
      info:'',
      normalHeight: document.documentElement.clientHeight
    };
  },
  beforeMount() {
    this.getRenZhen();
  },
  mounted() {
    var normalHeight = sessionStorage.getItem("normalHeight");

    var bg = document.getElementById("background");
    // normalHeight=document.documentElement.clientHeight;
    console.log("height:" + normalHeight);
    bg.style.height = normalHeight + "px";
    bg.style.backgroundColor = "#FFFFFF";
    bg.style.margin = "0px";

    var head = document.getElementById("renZhenHeadPosition");
    var headHeight = (normalHeight / 20) * 6;
    console.log("headHeight:" + headHeight);
    head.style.height = headHeight + "px";

    var main = document.getElementById("renZhenMainPosition");
    var mainHeight = (normalHeight / 20) * 10;
    console.log("mainHeight:" + mainHeight);
    main.style.height = mainHeight + "px";

    this.getGeRenZhuYe();
    this.getRenZhen();
  },
  methods: {
    back() {
      console.log("back:");
      this.$router.go(-1);
    },
    goToRenZhen() {
      this.$router.push({
        path: "/mine/quRenZhen"
      });
    },
    //获取个人主页信息
    getGeRenZhuYe() {
      var URL = this.IP.IP + "/user/mainInfo";
      console.log(URL);
      this.$ajax({
        method: "get",
        url: URL
      })
        .then(response => {
          console.log(response.data);
          var code = response.data.code;
          if (code == 0) {
            this.info = response.data.data;
          } else {
            Toast(response.data.msg);
          }
        })
        .catch(error => {
          console.log(error);
          //Toast(error);
        });
    },
    //获取认证情况
    getRenZhen() {
      var URL = this.IP.IP + "/user/userAuthentication";
      console.log(URL);
      this.$ajax({
        method: "get",
        url: URL
      })
        .then(response => {
          console.log(response.data);
          var code = response.data.code;
          if (code == 0) {
            this.renZhen = response.data.data;
            console.log(this.renzhen);
          } else {
            Toast(response.data.msg);
          }
        })
        .catch(error => {
          console.log(error);
          //Toast(error);
        });
    }
  }
};
</script>
<style>
.el-main {
  padding: 0px;
}
#renZhenTitleBack {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  background: url(../../assets/img/mine/geRenZhuYe/title.png) no-repeat;
  /**相应图片按比例伸缩*/
  background-size: 100%;
}
.renZhenNamecSS {
  color: #fff;
  font-size: 1em;
}
.imgCol {
  display: flex;
  align-items: center;
  justify-content: center;
}
.btnRenZhen {
  border: #53cdf5 1px solid;
  background-color: #fff;
  color: #53cdf5;
  font-size: 1.125em;
  width: 80%;
  height: 40px;
  outline: none;
  -webkit-border-radius: 25px;
  -moz-border-radius: 25px;
  -ms-border-radius: 25px;
  -o-border-radius: 25px;
  border-radius: 25px;
}
.btnNotRenZhen {
  border: #e0e0e0 1px solid;
  background-color: #e0e0e0;
  color: #707070;
  font-size: 1.125em;
  width: 80%;
  height: 40px;
  outline: none;
  -webkit-border-radius: 25px;
  -moz-border-radius: 25px;
  -ms-border-radius: 25px;
  -o-border-radius: 25px;
  border-radius: 25px;
}
</style>
